<template>
  <Row class="listWrapper">
    <Row class="titleWrapper" @click.n.native="draw.show=!draw.show">
      <slot name="title"><span class="title">{{title}}</span></slot>
      <slot name="extra">
        <span>
          <Icon v-if="addIcon" type="md-add" class="icon" @click.native="$emit('add')"></Icon>
          <Icon v-if="removeIcon" type="md-remove" @click.native="$emit('remove')"></Icon>
        </span>
      </slot>
    </Row>
    <Row v-show="draw.show" style="width:100%;padding:0px 5px">
      <slot></slot>
    </Row>
  </Row>
</template>

<script>
export default {
  name: "cfg-collapse",
  data(){
    return {

    }
  },
  props:{
    draw:{
      default:()=>{
        return {
          show:false
        }
      }
    },
    title:{
      default:()=>{
        return ''
      }
    },
    addIcon:{
      default:()=>{
        return true
      }
    },
    removeIcon:{
      default:()=>{
        return true
      }
    },
  },
  methods: {}
}
</script>

<style scoped>
  .listWrapper {
    width:100%;
  }
  .titleWrapper {
    display: flex;
    flex-wrap: nowrap;
    width:100%;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    color:var(--primary-color);
  }
  .icon {
    margin:0 5px;
  }
</style>
